<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        function f1(){
            let inText = document.getElementById("inText").value;
            // 直接量语法
            // let regExp = /pattern/attribute
            // pattern:正则表达式的内容
            // attribute:可选参数,修饰符
            let regExp = /[a-z]/i;
            // regExp.exec(s)方法:返回第一个匹配到的元素值
            // 返回值是一个数组格式,数组中的元素为匹配到的字符串
            // 包含了下标信息
            // 如果整个字符串均没有满足正则的字符,则返回null
            // let exec = regExp.exec(inText);
            // console.log(exec)
            // regExp.test(s)方法:判断指定的字符串s中是否满足正则表达式
            // 返回值是一个布尔类型
            // true:满足,false:不满足
            let flag = regExp.test(inText);
            console.log(flag);
        }
        function f2(){
            let inText = document.getElementById("inText").value;
            // let regExp = new RegExp(pattern,attribute);
            // pattern:正则表达式的内容
            // attribute:可选参数,修饰符
            // let regExp = new RegExp("[a-z]");
            let regExp = new RegExp("[a-z]","i");
            if(regExp.test(inText)){
                document.getElementById("s1").innerHTML = "<span style='color:green'>验证通过</span>";
            }else{
                document.getElementById("s1").innerHTML = "<span style='color:red'>您输入的数据有误</span>";
            }
        }
        function f3(){
            let username = document.getElementById("inText").value;
            // 用户名必须以英文字母开头
            // 整个用户名不能包含除了英文字母、数字、下划线以外的任意字符
            // 且长度为4-16位
            let regExp = /^[a-z]\w{3,15}$/i
            if(regExp.test(username)){
                document.getElementById("s1").innerHTML = "<span style='color:green'>用户名格式正确</span>";
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red'>用户名格式有误</span>";
            }

        }
    </script>
</head>
<body>
<input type="text" id="inText"><span id="s1"></span><br>
<button onclick="f1()">定义方式一</button><br>
<button onclick="f2()">定义方式二</button><br>
<button onclick="f3()">校验用户名</button><br>

</body>
</html>